<template>
  <el-drawer
    :visible.sync="drawer"
    direction="rtl"
    size="58%"
    :with-header="false"
    :width="1200"
    :destroy-on-close="true"
  >
    <div class="drawer_box">
      <div class="drawer_t">
        <div class="drawer_t_l">
          <img
            class="drawer_t_l_img"
            src="/static/skin/herodoo/main/platform/home/img/piliangoumai.png"
            alt=""
          />
          购买
        </div>
        <img
          class="drawer_t_r"
          src="/static/skin/herodoo/main/platform/home/img/guanbi.png"
          alt=""
          @click="drawer = false"
        />
      </div>
      <div class="drawer_c">
        <div class="table_list">
          <div class="tr">
            <div class="list" style="width: 34%;">权益名称</div>
            <div class="list" style="width: 20%;">权益标签</div>
            <div class="list" style="width: 5%;text-align: center;">单价</div>
            <div class="list" style="width: 11%;text-align: center;">
              起购数量(份)
            </div>
            <div class="list" style="width: 15%;text-align: center;">
              数量(份)
            </div>
            <div class="list" style="width: 8%;text-align: center;">金额</div>
          </div>
          <div class="td">
            <div class="list" style="width: 34%;">
              <div style="display: flex;">
                <img
                  v-if="list.MainPicturePath"
                  :src="JSON.parse(list.MainPicturePath)[0].url"
                  alt=""
                />
                <div
                  style="display: flex;justify-content: center;flex-flow: column;"
                >
                  <span>{{ list.Name }}</span>
                </div>
              </div>
            </div>
            <div class="list" style="width: 20%;">
              <div style="display: flex;">
                <div class="lable" v-for="(item, ind) in getList" :key="ind">
                  {{ item }}
                </div>
              </div>
            </div>
            <div
              class="list"
              style="width: 5%;text-align: center;font-weight: 700;"
            >
              <div>￥{{ list.CostPrice }}</div>
            </div>
            <div
              class="list"
              style="width: 11%;text-align: center;font-weight: 700;"
            >
              <div>{{ list.MinimumQuantity }}</div>
            </div>
            <div class="list add_num" style="width: 15%;text-align: center;">
              <div>
                <el-input-number
                  size="mini"
                  v-model="num"
                  @change="handleChange"
                  :min="list.MinimumQuantity"
                  :max="list.InventoryQuantity"
                  label="描述文字"
                ></el-input-number>
              </div>
            </div>
            <div
              class="list"
              style="width: 8%;text-align: center;color: #F78C51;font-weight: 700;"
            >
              <div>￥{{ (list.CostPrice * num).toFixed(2) }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="drawer_b">
        <div class="drawer_b_r"></div>
        <div class="drawer_b_r">
          <div class="drawer_list">
            合计: <span>￥{{ (list.CostPrice * num).toFixed(2) }}</span>
          </div>
          <span class="drawer_sx" @click="addToFather()">
            确认
          </span>
        </div>
      </div>
    </div>
  </el-drawer>
</template>

<script>
export default {
  name: "bulkBuying",
  props: {
    list: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      octopus: this.$parent.octopus,
      drawer: false,
      num: 1
    };
  },
  mounted() {},
  computed: {
    getList() {
      return this.list.FlagListName ? this.list.FlagListName.split(",") : "";
    }
  },
  methods: {
    handleClose() {
      this.drawer = false;
    },
    drawerOp(list) {
      let o = this;
      this.num = this.list.MinimumQuantity;
      this.$nextTick(() => {
        this.drawer = true;
      });
    },
    addToFather() {
      // console.log( this.multipleSelection);
      this.$emit("goodsList", this.num);
    },
    handleChange(value) {
    }
  }
};
</script>
<style scoped>
.scope_label {
  display: flex;
  flex-wrap: wrap;
}

.scope_name {
  font-size: 1.6rem;
  display: flex;
}

.scope_label span {
  color: #a1a1a1;
  border: 1px solid #d9d9d9;
  padding: 0px 0.5rem;
  font-size: 1.3rem;
  margin: 0.3rem;
  border-radius: 0.5rem;
}

.table_img {
  width: 7rem;
  height: 7rem;
  border-radius: 1rem;
  margin-right: 1rem;
}

.scope_sum {
  font-size: 2rem;
  font-weight: bold;
  color: #f19065;
}

.scope_price {
  font-size: 2rem;
  font-weight: bold;
  color: #191916;
}

.drawer_box {
  padding: 3rem 0.8rem 3rem 0;
  height: calc(100% - 5rem);
  display: flex;
  flex-direction: column;
}

.drawer_t {
  padding: 0 2.8rem;
  display: flex;
  justify-content: space-between;
}

.drawer_t_l {
  display: flex;
  align-items: center;
  font-size: 1.8rem;
  font-weight: bold;
}

.drawer_t_l_img {
  width: 2.8rem;
  margin-right: 1rem;
}

.drawer_t_r {
  width: 3rem;
  height: 3rem;
  cursor: pointer;
}

.drawer_c {
  height: 80vh;
  overflow: auto;
  margin-top: 3rem;
  padding: 0 3rem;
  background-color: #fdfdfd;
}

.drawer_b {
  height: 4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  bottom: 1rem;
  width: 100%;
  padding: 0 5rem;
  box-sizing: border-box;
}

.drawer_b_r {
  display: flex;
  align-items: center;
}

.drawer_list {
  margin: 0 1rem;
  font-size: 1.6rem;
}

.drawer_list span {
  color: #f78c51;
  font-weight: bold;
  font-size: 2rem;
  margin: 0 1.3rem;
}

.drawer_sx {
  padding: 1.3rem 5rem;
  background-color: #f78c51;
  color: #fff;
  font-size: 1.6rem;
  border-radius: 1rem;
  margin-left: 1.3rem;
  cursor: pointer;
}

.table_list {
  font-size: 1.8rem;
}

.table_list .tr {
  line-height: 6rem;
  display: flex;
  justify-content: space-between;
  background-color: #fcfbfa;
  /* border: 1px solid rgb(214, 214, 214); */
  border-radius: 0.6rem;
  font-weight: 700;
  padding: 0 2rem;
  box-shadow: 0px 2px 6px 0px rgba(180, 171, 206, 0.4);
}

.table_list .td {
  display: flex;
  justify-content: space-between;
  padding: 1rem 2rem;
  box-shadow: 0px 2px 6px 0px rgba(180, 171, 206, 0.4);
}
.table_list .td .lable {
  border: 1px solid #c4c4c4;
  margin-right: 0.5rem;
  padding: 0.2rem 0.5rem;
  font-size: 1.3rem;
  color: #a1a1a1;
  border-radius: 0.5rem;
}
.table_list .td .list {
  height: 10rem;
  display: flex;
  justify-content: center;
  flex-flow: column;
  padding: 1rem 0;
  box-sizing: border-box;
}

.table_list .td img {
  width: 8rem;
  height: 8rem;
  border-radius: 1rem;
  margin-right: 1.7rem;
}

.add_num {
  /* height: 4.5rem;
    line-height: 4.5rem; */
  display: flex;
  /* margin: auto; */
}
>>> .el-input-number--mini {
  width: 100%;
}
/* .add_num>div{
    flex: 1;
}
.add_num .bon{
    line-height: 4.2rem;
    font-size: 2.5rem;
    background-color: #FAFAFA;
    cursor: pointer;
    border-right: 1px solid #D9D9D9;
}
.add_num .jian{
    border-left: 1px solid #D9D9D9;
    border-right:none;
} */
</style>
